<template>
  <a-drawer v-model:visible="visible" :title="modalTitle" width="80%" :closable="false"
    :footer-style="{ textAlign: 'right' }">
    <a-row type="flex" class="mb-3">
      <a-card class="base_card" :bodyStyle="{ padding: '20px 40px' }">
        <div class="card-title">售后信息</div>
        <a-row type="flex">
          <a-col :span="18">
            <a-row type="flex">
              <a-col v-for="(item, index) in state.info.refund_info" :key="index" :span="7">
                <a-row v-for="(child, j) in item" :key="j">
                  <div class="flex mb-1">
                    <div>{{ child.title }}</div>
                    <div>{{ child.content }}</div>
                  </div>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="6">
            <div class="mb-2">问题描述： {{ state.info.user_remark }}</div>
            <div class="flex flex-wrap gap">
              <div class="imgs" v-for="(img, i) in state.info.user_imgs" :key="i">
                <a-image v-if="img" :src="img" :width="50" />
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </a-row>
    <a-row class="mb-3">
      <a-card class="base_card" :bodyStyle="{ padding: '20px 40px' }">
        <a-row type="flex" :gutter="20">
          <a-col :span="6" v-for="(item, index) in state.info.refund_other" :key="index">
            <div class="card-title">{{ item.title }}</div>
            <a-row v-for="(child, j) in item.data" :key="j">
              <div class="flex mb-1">
                <div>{{ child.title }}</div>
                <div>{{ child.content }}</div>
              </div>
            </a-row>
          </a-col>
        </a-row>
      </a-card>
    </a-row>
    <div class="mb-3">
      <div class="title">售后商品</div>
      <a-table :dataSource="state.info.refund_goods" :columns="state.goodsColumns" rowKey="goods_id" :pagination="false">
        <template #bodyCell="{ record, column }">
          <template v-if="column.dataIndex === 'goodsInfo'">
            <div class="flex gap">
              <a-image :src="record.goods_img" :width="90"></a-image>
              <div class="goods_name">
                <div class="ellipsis">
                  <a-tooltip>
                    <template #title>{{ record.goods_name }}</template>
                    {{ record.goods_name }}
                  </a-tooltip>
                </div>
                <div>{{ record.goods_no }}</div>
                <div>{{ record.spec_name }}</div>
              </div>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <div class="mb-3" v-if="state.info.refund_ship.length > 0">
      <div class="title">售后物流</div>
      <a-table :dataSource="state.info.refund_ship" :columns="state.shipColumns" rowKey="ship_id" :pagination="false">
      </a-table>
    </div>
    <div class="mb-3">
      <div class="title">售后日志</div>
      <a-table :dataSource="state.info.logs" :columns="state.logColumns" rowKey="log_id" :pagination="false">
      </a-table>
    </div>
    <div class="flex justify-end">
      <a-space size="middle">
        <template v-for="(btn, i) in state.info.actions" :key="i">
          <a-popconfirm v-if="btn.type == 4" title="你确定要退款吗?" ok-text="确认" cancel-text="取消" @confirm="confirmRefund">
            <a-button type="primary">{{ btn.title }}</a-button>
          </a-popconfirm>
          <a-button v-else type="primary" @click="clickBtn(btn)">{{ btn.title }}</a-button>
        </template>
      </a-space>
    </div>
    <!-- 发货 -->
    <sendRefund ref="send" @update="refresh" />
    <!-- 审核 -->
    <auditRefund ref="audit" @update="refresh" />
    <!-- 关闭售后 -->
    <closeRefund ref="close" :id="refund_id" @update="refresh" />
  </a-drawer>
</template>
<script setup>
import { info, refundConfirm, refundAccept } from "@/api/refund";
import { message } from "ant-design-vue";
import { reactive, ref } from "vue";
import sendRefund from "./components/sendRefund.vue";
import auditRefund from "./components/auditRefund.vue";
import closeRefund from "./components/closeRefund.vue";

const refund_id = ref(0);
const visible = ref(false);
const modalTitle = ref("");

const audit = ref(null);
const close = ref(null);
const send = ref(null);

const state = reactive({
  info: {
    user_remark: "",
    user_imgs: [],
    refund_info: [],
    refund_other: [],
    actions: [],
    refund_goods: [],
    logs: [],
    refund_ship: [],
  },
  goodsColumns: [
    {
      title: "商品信息",
      dataIndex: "goodsInfo",
      width: 300,
    },
    {
      title: "商品数量",
      dataIndex: "goods_num",
    },
    {
      title: "单价",
      dataIndex: "goods_price",
      customRender(record) {
        return `￥${record.value || "-"}`;
      },
    },
  ],
  logColumns: [
    {
      title: "id",
      dataIndex: "log_id",
      width: 100,
    },
    {
      title: "标题",
      dataIndex: "title",
      customRender(record) {
        return record.value || "-";
      },
      width: 200,
    },
    {
      title: "内容",
      dataIndex: "content",
      customRender(record) {
        return record.value || "-";
      },
      width: 200,
    },
    {
      title: "IP",
      dataIndex: "store_ip",
      customRender(record) {
        return record.value || "-";
      },
      width: 200,
    },
    {
      title: "备注",
      dataIndex: "content",
      width: 200,
    },
    {
      title: "操作人",
      dataIndex: "store_name",
      customRender(record) {
        return record.value || "-";
      },
      width: 200,
    },
    {
      title: "操作时间",
      dataIndex: "create_time",
      width: 200,
    },
  ],
  shipColumns: [
    {
      title: "id",
      dataIndex: "ship_id",
    },
    { title: "物流编号", dataIndex: "ship_code" },
    { title: "物流公司", dataIndex: "ship_name" },
    { title: "物流单号", dataIndex: "ship_no" },
  ],
});

const show = (record) => {
  visible.value = true;
  modalTitle.value = "售后详情";
  refund_id.value = record.refund_id;
  getDetails(record.refund_id);
};
const getDetails = (id) => {
  info({
    id: id,
  }).then((res) => {
    const data = res.data;
    state.info = Object.assign({}, data);
    state.info.refund_goods = [data.refund_goods];
  });
};
const clickBtn = (item) => {
  switch (item.type) {
    case 1:
      // 审核
      audit.value.show({
        id: refund_id.value,
        ...item,
        refund_type: state.info.refund_type,
      });
      break;
    case 2:
      //  确认收货
      refundAccept({
        id: refund_id.value,
      }).then((res) => {
        if (res.code == 0) {
          message.success(res.msg);
          refresh();
        }
      });
      break;
    case 3:
      // 售后发货
      send.value.show({
        id: refund_id.value,
        ...item,
      });
      break;
    case 5:
      // 关闭售后
      close.value.show({
        id: refund_id.value,
        ...item,
      });
      break;
  }
};
// 确认退款
const confirmRefund = () => {
  refundConfirm({
    id: refund_id.value,
  }).then((res) => {
    if (res.code == 0) {
      message.success(res.msg);
      refresh();
    }
  });
}
const refresh = () => {
  if (refund_id.value !== 0) {
    getDetails(refund_id.value);
  }
};
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.count {
  font-weight: bold;
  font-size: 14px;
}

.goods_name {
  width: 200px;
}

.title {
  font-size: 16px;
  color: #101010;
  font-weight: bold;
  margin-bottom: 12px;
}
</style>